<template>

	<div class="goodsinfo-container">

		<!-- ==========有毒的代码， 不知道为什么总是不行，多了一个回调返回的样子 -->
		<!-- <transition
			@brfore-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition> -->

		<transition
      		@before-enter="beforeEnter"
      		@enter="enter"
      		@after-enter="afterEnter">
      		<div class="ball" v-show="ballFlag" ref="ball"></div>
    	</transition>
		<!-- 商品轮播区域 -->
		<div class="mui-card">
     		<div class="mui-card-content">
     		  <div class="mui-card-content-inner">
     		    <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
     		  </div>
     		</div>
    	</div>
	
		<!-- 商品购买区域 -->
		<div class="mui-card">
			<div class="mui-card-header">{{ goosinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
					  <span>市场价<del>￥{{ goosinfo.market_price }}</del></span>
					  销售价：<span class="sell-price">￥{{ goosinfo.sell_price }}</span>
					</p>
					<p>购买数量：<number style="display: inline;" @getCount="getSelectedCount" :max="goosinfo.stock_quantity"></number></p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>	
						<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>


		<!-- 商品详情区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号：{{ goosinfo.goods_no }} </p>
					<p>库存情况：{{ goosinfo.stock_quantity }}件</p>
					<p>上架时间：{{ goosinfo.add_time }} </p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入轮播图组件
	import swiper from '../subcomponents/swiper.vue'
	// 导入商品购买时数量加选框显示
	import number from '../subcomponents/number.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id, //将路由上的参数挂载到data 中，后期id就可随便调用了
				lunbotu: [],
				goosinfo: [],
				ballFlag: false, //控制小球隐藏显示
				selectedCount: 1
			}
		},
		created() {
			this.getLunbo();
			this.getGoodsInfo()
		},
		methods: {
			getLunbo() {
     			this.$http.get("api/getthumimages/" + this.id).then(result => {
     			 if (result.body.status === 0) {
     			   // 先循环轮播图数组的每一项，为 item 添加 img 属性，因为 轮播图 组件中，只认识 item.img， 不认识 item.src
     			   result.body.message.forEach(item => {
     			     item.img = item.src;
     			   });
     			   this.lunbotu = result.body.message;
     			 }
   		   	  });
     		},
     		getGoodsInfo() { //获取商品展示的信息
     			this.$http.get('api/goods/getinfo/' + this.id).then(result => {
     				if (result.body.status === 0) {
     					this.goosinfo = result.body.message[0]
     				} else {
     					alert('错误')
     				}
     			})
     		},
     		goDesc(id) { //编程式导航点击图文介绍实现功能
     			this.$router.push({ name: 'goodsdesc', params: {id} })
     		},
     		goComment(id) { //编程式导航点击商品评论进入评论页面
     			this.$router.push({ name: 'goodscomment', params: {id} })
     		},
     		addToShopCar() {
     			this.ballFlag = !this.ballFlag
     		},
     		// 小球动画优化思路：
     		// 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经局限在了某一分辨率下的 滚动条未滚动的情况下；
     		// 2. 只要分辨率和 测试的时候不一样，或者 滚动条有一定的滚动距离之后， 问题就出现了；
     		// 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
     		// 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
     		// 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()
     		//小球动画 半场动画显示
     		beforeEnter(el) {
     			el.style.transform = "translate(0, 0)";
     		},
     		enter(el, done) {
     			el.offsetWidth;

     			// 因为小球的位置时死的，混动页面就会出现错误，所以要把位置写成变量
     			// el.style.transform = "translate(93px, 230px)";
     			//获取小球的位置 因为在同一个组件中 直接用 refs 获取标签 
     			const ballPosition = this.$refs.ball.getBoundingClientRect()
     			// 购物车的位置 因为购物车在不同的组件， 所以直接用 JS 获取元素标签
     			const carPosition = document.getElementById('badge').getBoundingClientRect()

     			const xDistence = carPosition.left - ballPosition.left;
     			const yDistence = carPosition.top - ballPosition.top;


     			el.style.transform = `translate(${xDistence}px, ${yDistence}px)`;

     			el.style.transition = "all 1s ease";

     			done()

     		},
     		afterEnter(el) {
     			this.ballFlag = !this.ballFlag
     		},
     		getSelectedCount(count) { //获取number 组件上加入购物车大的数量
     			//当子组件选中的数量给父组件  选中的值保存在 data 上
     			this.selectedCount = count
     		}
   		},
		components: {
			swiper,
			number
		}
	}
</script>

<style lang="scss" scoped> 
	.goodsinfo-container {
		background: #eee;
		overflow: hidden;
		.sell-price {
			color: red; 
			font-weight: bold;
		}
		.mui-card-footer {
			display: block;
			button {
				margin: 15px 0;
			}
		}

		.ball {
			width: 15px;
			height: 15px;
			background: red;
			border-radius: 50%;
			position: absolute;
			z-index: 99;
			left: 147px;
			top: 408px;

		}
	}
	
</style>
